<template>
	<view class="xh-view">
		<u-input :border="false" :placeholder="placeholder" v-model="dataValue" @input="valueChange" :disabled="disabled" :type="item.data.formType == 'number' ? 'number' : 'text'" @click="showTableFun" @clear="clearInput" clearable></u-input>

		<u-popup class="my-popup" v-model="showTable" mode="bottom" :closeable="true" close-icon-pos="top-right" border-radius="10" close-icon-color="#c0c4cc" close-icon-size="40">
			<view class="create-menu">
				<view class="menu-title">
					<u-subsection active-color="orange" height="60" :list="subsectionList" :current="currentType" @change="changeSubsection"></u-subsection>
				</view>
				<tian-yan-cha-table v-if="currentType == 0" @value-change="valueChange" @close-table="closeTable" :value="dataValue"></tian-yan-cha-table>
				<duplicate-check v-if="currentType == 1" :value="dataValue"></duplicate-check>
			</view>
		</u-popup>
	</view>
</template>

<script>
import TianYanChaTable from '@/pages/customerManagement/common/components/TianYanChaTable.vue';
import DuplicateCheck from '@/pages/customerManagement/common/components/DuplicateCheck.vue';
export default {
	props: {
		/** 值 */
		value: {
			type: [String, Number],
			default: '',
		},
		/** 索引值 用于更新数据 */
		index: Number,
		/** 包含数据源 */
		item: Object,
		disabled: {
			type: Boolean,
			default: false,
		},
		/** 自定义数据源 */
		relation: Object,
		placeholder: {
			type: String,
			default() {
				return '请填写内容';
			},
		},
	},
	data() {
		return {
			dataValue: '',
			showTable: false,
			search: '',
			scrollTop: 0,
			subsectionList: [
				{
					name: '天眼查',
				},
				{
					name: '查重',
				},
			],
			currentType: 0,
		};
	},
	components: {
		TianYanChaTable,
		DuplicateCheck,
	},
	watch: {
		value: function (val) {
			this.dataValue = val + '';
			this.valueChange();
		},
	},
	computed: {
		type() {
			if (this.item && this.item.form_type == 'password') {
				return this.item.form_type;
			} else {
				return 'text';
			}
		},
	},

	created() {
		this.dataValue = this.value;
	},

	methods: {
		clearInput() {
			this.dataValue = '';
			this.valueChange();
		},

		closeTable() {
			this.showTable = false;
		},

		valueChange(value) {
			this.dataValue = value ? value : this.dataValue;
			let data = {
				index: this.index,
				fieldName: this.item.data.fieldName,
				value: this.dataValue.trim(),
			};
			this.$emit('value-change', data);
		},

		showTableFun() {
			if (this.item.data.fieldId == 10) {
				this.currentType = 0;
				this.dataValue = this.value;
				this.showTable = true;
			}
		},

		changeSubsection(index) {
			this.currentType = index;
		},
	},
};
</script>

<style>
.xh-view {
	width: 100%;
}

.xh-view-hover {
	background-color: #eee;
}

.my-popup /deep/ .u-close--top-right {
	top: 20rpx !important;
}

.my-popup /deep/ .u-drawer-content {
	height: 75% !important;
}

.create-menu {
	position: relative;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
	max-height: 100%;
	border-radius: 5px 5px 0 0;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.menu-title {
	width: 100%;
	font-size: 35rpx;
	padding: 10rpx 80rpx;
	border-bottom: 1px solid #efeff4;
}
</style>
